<template>
	<view class="container">
		<view class="commentArea" v-if="isShow">
			<view class="header">
				<view class="title">评论({{totalCount}})</view>
				<!-- 评论排序 方式 -->
				<view class="sortType"></view>
			</view>
			<scroll-view scroll-y class="commentScroll">
				<view class="scrollItem" v-for="item in commentData" :key="item.commentId">
					<view class="top">
						<image :src="item.user.avatarUrl"></image>
						<view class="userInfo">
							<text class="nickName">{{item.user.nickname}}</text>
							<text class="replyTime">{{item.time}}</text>
						</view>
						<view class="likeCount">
							<text>{{item.likedCount}}</text>
							<text class="iconfont icon-dianzan-copy"></text>
						</view>
					</view>
					<view class="center">{{item.content}}</view>
					<view class="bot" v-if="item.showFloorComment.replyCount">{{item.showFloorComment.replyCount}}条回复 > </view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['isShow','commentData','totalCount'],
	}
	
</script>

<style lang="scss">
	.container {
		// 头部样式
		// 评论区样式
		.commentArea {
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 10rpx;
			// height: calc(100vh - 500rpx);
			width: 100%;
			background-color: #fff;
			z-index: 9999;
			// 动画效果
			animation:commentScroll 0.3s;
			@-webkit-keyframes commentScroll
			{
			from {height: 0rpx;}
			to {
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 565rpx);
				/* #endif */
				/* #ifdef H5 */
				height: calc(100vh - 560rpx);
				/* #endif */
				}
			}
			
			.header {
				margin-bottom: 10rpx;
				.title {
					padding: 10rpx 0;
				}
				.sortType {}
			}
			// 评论区内容
			.commentScroll {
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 565rpx);
				/* #endif */
				/* #ifdef H5 */
				height: calc(100vh - 560rpx);
				/* #endif */
				.scrollItem {
					margin-bottom: 10rpx;
					.top {
						// 纵向排列
						position: relative;
						display: flex;
						margin-bottom: 20rpx;
						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
						.userInfo {
							display: flex;
							// 改变flex布局 纵向排列
							flex-direction: column;
							margin-left: 20rpx;
							height: 40rpx;
							line-height: 40rpx;
							
							.nickName {
								color: #606060;
							}
							.replyTime {
								font-size: 26rpx;
								color: #aaa;
							}
						}
						.likeCount {
							position: absolute;
							right: 0;
							top: 0;
							color: #aaa;
							font-size: 26rpx;
							
							.iconfont {
								margin: 10rpx;
								width: 80rpx;
								height: 80rpx;
								line-height: 80rpx;
								font-size: 35rpx;
							}	
						}
						
					}
					.center {
						color: #333333;
						font-weight: bolder;
						padding: 0 100rpx;
					}
					.bot {
						font-size: 26rpx;
						color: #6b89b0;
						padding: 5rpx 100rpx;
					}
				}
			}
		}
	}
</style>
